<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		hr{
			border: 1px solid #666;
		}
		body{
			margin: 50px;
		}
		img{
			width: 600px;
		}
		.ck{
			height: 50px;
			width: 200px;
		}
	</style>
</head>
<body>
	<!-- 情境文本颜色 -->
	<p class="text-muted">Doyoudo</p>
	<p class="text-primary">Doyoudo</p>
	<p class="text-success">Doyoudo</p>
	<p class="text-info">Doyoudo</p>
	<p class="text-warning">Doyoudo</p>
	<p class="text-danger">Doyoudo</p>
	<hr>

	<!-- 情境背景色 -->
	<p class="bg-primary">Doyoudo</p>
	<p class="bg-success">Doyoudo</p>
	<p class="bg-info">Doyoudo</p>
	<p class="bg-warning">Doyoudo</p>
	<p class="bg-danger">Doyoudo</p>
	<hr>

	<!-- 关闭按钮、三角符号、快速浮动 --> 
	<button class="close">&times;</button>
	<br>
	<span class="caret"></span>
	<i class="caret"></i>
	<br>
	<div class="pull-left">左浮动</div>
	<div class="clearfix"></div>	
	<span>Doyoudo</span>
	<div class="pull-right">右浮动</div>
	<div class="center-block bg-primary ck text-center">居中</div>
	<hr>

	<!-- 显示或隐藏内容 -->
	<p class="show">显示</p>
	<p class="hidden">隐藏</p>
	
	<!-- 响应式工具 -->
	<div class="hidden-xs">超小屏幕时隐藏</div>
	<div class="visible-md-block">中等屏幕时显示为块级元素</div>
	<div class="visible-sm-inline">小屏幕时显示为内联元素</div>
	<span>abc</span>









</body>
</html>